<!--数据对比展示组件-->

<script lang="ts">
import {Vue, Component, Prop, Watch, Inject} from 'vue-property-decorator';
import EditInput from '../MainDisplay/EditInput.vue';
import {DiffField, diffTypeMaps} from "./ContentDiff";
import cloneDeep from "lodash/cloneDeep";
import {BusinessType} from "../../type";
import {
  BrandDetail,
  CommodityDetail,
  CommodityLicenseDetail,
  LicenseEntity,
  LicenseInfo,
  PartnerLicenseDetail
} from "../../plugins/dto";
import {fieldProps} from "../MainDisplay/InfoPreview";

@Component({components: {EditInput}})
export default class ContentDiff extends Vue{
  commodityReviewData:{[key:string]:any} = {}
  brandReviewData:{[key:string]:any} = {}
  commodityLicenseReviewData:{[key:string]:any} = {}
  partnerLicenseReviewData:{[key:string]:any} = {}
  @Inject("businessType")
  providedBusinessType!: BusinessType;

  @Inject("auditedFields")
  providedAuditedFields!:{key:string, value: string}[]

  @Inject("newFields")
  providedNewFields!:{key:string, value: string}[]

  @Inject("CommodityDetail")
  providedCommodityDetail!:CommodityDetail;


  @Inject("BrandDetail")
  providedBrandDetail!:BrandDetail

  @Inject("CommodityLicenseDetail")
  providedCommodityLicenseDetail!:CommodityLicenseDetail

  @Inject("PartnerLicenseDetail")
  providedPartnerLicenseDetail!:PartnerLicenseDetail

  // 字段配置
  diffFields:DiffField[] = diffTypeMaps[this.providedBusinessType.businessType] as DiffField[];
  composedFieldsProp: any = Vue.observable({composedFields: []});


  @Inject("StandardInfo")
  providedStandardInfo!:CommodityDetail;

  @Inject('modeType') injectedModeType!: {mode: string};


  @Watch("providedCommodityDetail", {immediate: true, deep: true})
  commodityDetailChange(value:CommodityDetail){

    const data:DiffField[] = cloneDeep(this.diffFields).map((item)=>{
      item.value = this.providedCommodityDetail[item.key as keyof typeof this.providedCommodityDetail];
      item.oldValue = this.providedStandardInfo[item.key as keyof typeof this.providedStandardInfo];
      if(item.value !== item.oldValue){
        item.dismatch = true
      }else{
        item.dismatch = false
      }

      if(item.labelKey && !item.multiple){
        (item as any)[item.labelKey] = this.providedCommodityDetail[item.labelKey as keyof typeof this.providedCommodityDetail]
        item.oldValue = this.providedStandardInfo[item.labelKey as keyof typeof this.providedStandardInfo]
      }else if(item.labelKey && item.multiple){
        (item as any)[item.key as keyof DiffField] = this.providedCommodityDetail[item.key as keyof typeof this.providedCommodityDetail];
        const data = (this.providedStandardInfo[item.key as keyof typeof this.providedCommodityDetail] as LicenseInfo[]).map(k => k.licenseCode)
        if(data!.length){
          item.oldValue = data.join(",")
        }else{
          item.oldValue = ""
        }
      }
      if(item.render === 'image' && !this.providedCommodityDetail[item.key as keyof typeof this.providedCommodityDetail]){
        item.value = "https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png"
      }
      if(item.render === 'image' && !this.providedStandardInfo[item.key as keyof typeof this.providedStandardInfo]){
        item.oldValue = "https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png"
      }
      return item
    })
    this.composedFieldsProp.composedFields = data
  }

  @Watch("providedBrandDetail", {immediate: true, deep: true})
  brandDetailChange(value:BrandDetail, old:any){
    const data:DiffField[] = cloneDeep(this.diffFields).map((item)=>{
      item.value = this.providedBrandDetail[item.key as keyof typeof this.providedBrandDetail];
      item.oldValue = this.providedStandardInfo[item.key as keyof typeof this.providedStandardInfo];
      if(item.value !== item.oldValue){
        item.dismatch = true
      }else{
        item.dismatch = false
      }
      if(item.render === 'image' && !this.providedBrandDetail[item.key as keyof typeof this.providedBrandDetail]){
        item.value = "https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png"
      }
      if(item.render === 'image' && !this.providedStandardInfo[item.key as keyof typeof this.providedStandardInfo]){
        item.oldValue = "https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png"
      }
      return item
    })
    console.log("===========>providedBrandDetail", data[0].value)
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.composedFieldsProp.composedFields = data;
      },100)
    })

    // this.$forceUpdate();
  }

  @Watch("providedCommodityLicenseDetail", {immediate: true, deep: true})
  commodityLicenseChange(value:CommodityLicenseDetail){
    const data:DiffField[] = cloneDeep(this.diffFields).map((item)=>{
      item.value = this.providedCommodityLicenseDetail[item.key as keyof typeof this.providedCommodityLicenseDetail];
      item.oldValue = this.providedStandardInfo[item.key as keyof CommodityDetail];
      if(item.value !== item.oldValue){
        item.dismatch = true
      }else{
        item.dismatch = false
      }
      if(item.labelKey && !item.multiple){
        (item as any)[item.labelKey] = this.providedCommodityLicenseDetail[item.labelKey as keyof typeof this.providedCommodityLicenseDetail]
        item.oldValue = this.providedCommodityLicenseDetail[item.labelKey as keyof typeof this.providedCommodityLicenseDetail]
      }else if(item.labelKey && item.multiple){
        (item as any)[item.key as keyof DiffField] = this.providedCommodityLicenseDetail[item.key as keyof typeof this.providedCommodityLicenseDetail];
      }
      return item
    })
    this.composedFieldsProp.composedFields = data;
    this.$forceUpdate()
  }

  @Watch("providedPartnerLicenseDetail", {immediate: true, deep: true})
  partnerLicenseChange(value:CommodityLicenseDetail){
    const data:DiffField[] = cloneDeep(this.diffFields).map((item)=>{
      item.value = this.providedPartnerLicenseDetail[item.key as keyof typeof this.providedPartnerLicenseDetail];
      item.oldValue = this.providedPartnerLicenseDetail[item.key as keyof typeof this.providedPartnerLicenseDetail];
      if(item.value !== item.oldValue){
        item.dismatch = true
      }else{
        item.dismatch = false
      }
      if(item.labelKey && !item.multiple){
        (item as any)[item.labelKey] = this.providedPartnerLicenseDetail[item.labelKey as keyof typeof this.providedPartnerLicenseDetail]
        item.oldValue = this.providedPartnerLicenseDetail[item.labelKey as keyof typeof this.providedPartnerLicenseDetail]
      }else if(item.labelKey && item.multiple){
        (item as any)[item.key as keyof DiffField] = this.providedPartnerLicenseDetail[item.key as keyof typeof this.providedPartnerLicenseDetail];
      }
      return item
    })
    setTimeout(()=>{
      this.composedFieldsProp.composedFields = data;
    }, 100)
  }


  @Watch("providedStandardInfo", {immediate: true, deep: true})
  standardInfoChange(value:CommodityDetail){

  }

  @Watch("composedFieldsProp.composedFields",{immediate: true, deep: true})
  composedFieldsChange(value: DiffField[]){
    console.log('composedFields===>', value[0].value)
    value.forEach(item => {
      if(item.multiple && item.key === 'licenses'){
        item!.licenses = item.value as LicenseInfo[];
      }
    })
    let data:{[key:string]: any} = {}
    value.forEach((item:DiffField, index:number) => {
      data[item.key] = item.value
    })
    if(this.providedBusinessType.businessType === 'commodity'){
      this.commodityReviewData = data
    }else if(this.providedBusinessType.businessType === 'brand'){
      this.brandReviewData = data
    }else if(this.providedBusinessType.businessType === 'commodityLicense'){
      this.commodityLicenseReviewData = data
    }else if(this.providedBusinessType.businessType === 'partnerLicense'){
      this.partnerLicenseReviewData = data
    }
  }
  
  mounted() {
    // 组装新旧数据
    // this.composedFields = cloneDeep(this.diffFields).map(field => {
    //   field.oldValue = this.providedAuditedFields.find(item => item.key === field.key)!.value;
    //   field.value = this.providedNewFields.find(item => item.key === field.key)!.value;
    //   return field
    // })
  }

}


</script>

<template>
  <div>
    <div style="display: flex;border-bottom: 1px solid #f0f0f0">
      <div class="cc-content-diff__left__title">已审核数据</div>
      <div class="cc-content-diff__right__title">新申请数据</div>
    </div>
    <div style="height:100%" v-for="(item, index) in composedFieldsProp.composedFields" class="cc-content-diff__wrapper">
      <div class="cc-content-diff__left">

        <div :class="{'cc-content-diff__left__item': true, dismatch: item.dismatch}">
          <div class="cc-content-diff__left__item__label">{{item.label}}</div>
          <template v-if="item.render === 'image' &&  item.oldValue" class="cc-content-diff__left__item__value">
            <el-image :src="item.oldValue"
                      style="width: 128px; height: 128px" fit="contain" :preview-src-list="[item.oldValue]">
            </el-image>
          </template>
          <template v-else >
            <div :class="{'cc-content-diff__left__item__value': true, dismatch: item.dismatch}">{{item.oldValue}}</div>
          </template>
        </div>
      </div>
      <div class="cc-content-diff__right">

        <div :class="{'cc-content-diff__right__item': true, dismatch: item.dismatch}">
          <div class="cc-content-diff__right__item__label">{{item.label}}</div>
          <template v-if="item.render === 'image'" >
            <el-image :src="item.value"
                      v-if="item.value"
                      style="width: 128px; height: 128px" fit="contain" :preview-src-list="[item.value]">
            </el-image>
            <el-image :src="'https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png' "
                      v-else
                      style="width: 128px; height: 128px" fit="contain" :preview-src-list="['https://official-data.oss-cn-shanghai.aliyuncs.com/mdm/base/no_image.png']"
            >
            </el-image>
          </template>
          <template v-else>
            <div>
              <div :class="{'cc-content-diff__right__item__value': true, dismatch: item.dismatch}">
                <EditInput
                    v-model="item.value"
                    :item="item"
                    v-if="item"
                    :editable="item.editable"
                    :render="item.render"
                >
                </EditInput>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.cc-content-diff__left__title{
  padding: 10px;
  height: 42px;
  color: #409EFF;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  background: #ECF5FF;
  width: 50%;
  box-sizing:  border-box;
}
.cc-content-diff__right__title{
  padding: 10px;
  height: 42px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  width: 50%;
  box-sizing:  border-box;
}
.cc-content-diff__wrapper{

  div {
    box-sizing: border-box;
  }
  display: flex;
  height: 100%;
  overflow-y: scroll;
  .dismatch{
    background: #FEF0F0;
  }
  .cc-content-diff__left{
    width: 50%;
    border-right: 1px solid #f0f0f0;
    .cc-content-diff__left__item{
      display: flex;
      height: 100%;
      align-items: flex-start;
      padding: 4px 6px;
      border-bottom: 1px solid #f0f0f0;
      .cc-content-diff__left__item__label{
        min-width: 100px;
        text-align: left;
        height: 27px;
        line-height: 27px;
        display: flex;
        align-items: center;
      }
      .cc-content-diff__left__item__value{
        margin-left: 12px;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
  .cc-content-diff__right{
    width: 50%;
    .cc-content-diff__right__item{
      display: flex;
      align-items: flex-start;
      padding: 4px 6px;
      border-bottom: 1px solid #f0f0f0;
      .cc-content-diff__right__item__value{
        width: 100%;
      }
      .cc-content-diff__right__item__label{
        min-width: 100px;
        text-align: left;
        height: 27px;
        line-height: 27px;
      }
    }
    ::v-deep{
      .licenseWrapper{
        .el-input.is-disabled .el-input__inner{
          background-color: unset;
        }
      }
    }
  }
}
.cc-content-diff__wrapper::-webkit-scrollbar{
  display: none;
}
.dismatch{
  ::v-deep .el-input__inner{
    background: #FEF0F0;
  }
}
</style>